<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax.jsp</title>
</head>
<body>
	<div id="show"></div>
	<hr style="width:100%; clear:left;"/>
	<button>发送同步请求</button>
	<button>发送异步请求</button>

	<button>发送同步请求10次</button>
	<button>发送异步请求10次</button>
	
	<script type="text/javascript">
	     var show = document.querySelector("#show");
	     console.info(show);
	     var btn = document.querySelectorAll("button");
	     console.info(btn);
	     btn[0].onclick = function(){
	    	 var xhr = new XMLHttpRequest();
	    	 xhr.onreadystatechange = function(){
	    		 console.info(xhr.readyState+":"+xhr.status);
	    		 if(xhr.readyState == 4 && xhr.status == 200){
	    			 console.info(xhr.responseText);
	    			 show.innerHTML += xhr.responseText;
	    		 };
			 };
	    	 xhr.open("get", "inc.jsp?name=false", false);
	    	 xhr.send();
	     };
	     
	     btn[1].addEventListener("click",function(){
	    	 var xhr = new XMLHttpRequest();
	    	 xhr.onreadystatechange = function() {
	    		 console.info("xhr.readyState:"+xhr.readyState+"\txhr.status"+xhr.status+"\txhr.responseText"+xhr.responseText);
		         if(xhr.readyState == 4 && xhr.status == 200){
		        	 console.info(xhr.responseText);
		        	 show.innerHTML += xhr.responseText;
		         }
			 }
	         xhr.open("get", "inc.jsp?name=false", true);
	         xhr.send();
	     });
	     
	     btn[2].addEventListener("click",function(){
				for(var i=0;i<10;i++){
					let xhr = new XMLHttpRequest();
					xhr.onreadystatechange=function(){
						if(xhr.readyState==4&&xhr.status==200){
							show.innerHTML += xhr.responseText;
						}
					}
					
					xhr.open("get","inc.jsp?name="+i,false);
					xhr.send();
				}
			});
			
			btn[3].addEventListener("click",function(){
				for(var i=0;i<10;i++){
					let xhr = new XMLHttpRequest();
					xhr.onreadystatechange=function(){
						if(xhr.readyState==4&&xhr.status==200){
							show.innerHTML += xhr.responseText;
						}
					}
					
					xhr.open("get","inc.jsp?name="+i,true);
					xhr.send();
				}
			});
	</script>
</body>
</html>